<template>
	<view class="progress-bar">
		<view class="progress-bar-title" v-if="title">{{ title }}</view>

		<view v-if="!secondValue" class="bar">
			<view
				class="bar-single"
				:style="{
					backgroundColor: backColor,
					fontSize: textSize,
					borderRadius: barRadius,
					height: barHeight,
					lineHeight: barHeight
				}"
			>
				<view
					class="bar-content"
					:style="{ width: firstWidth, minWidth: minWidth,borderRadius: barRadius, }"
				>
					<view
						:class="{ 'bar-content-inner': animation }"
						:style="{ background: contentColor,borderRadius: barRadius, }"
					>
						<text
							v-if="!textOut"
							class="bar-text"
							:style="{ color: textColor }"
						>
							<!-- {{ singleText }} -->
						</text>
						<text v-else class="bar-text-placeholder">1</text>
					</view>
				</view>
			</view>
			<view v-if="textOut" class="bar-text" :style="{ color: textColor }">
				{{ singleText }}
			</view>
		</view>

		<view v-else class="bar">
			<view
				class="bar-single bar-double"
				:style="{
					backgroundColor: backColor,
					fontSize: textSize,
					borderRadius: barRadius,
					height: barHeight,
					lineHeight: barHeight
				}"
			>
				<view
					class="bar-content"
					:style="{ width: firstWidth, minWidth: minWidth,borderRadius: barRadius, }"
				>
					<view
						:class="{ 'bar-content-inner': animation }"
						:style="{ background: contentColor }"
					>
						<text class="bar-text" :style="{ color: textColor }">
							<!-- {{ singleText }} -->
						</text>
					</view>
				</view>
				<view class="bar-interval">1</view>
				<view
					class="bar-content"
					:style="{ width: secondWidth, minWidth: minWidth,borderRadius: barRadius, }"
				>
					<view
						:class="{ 'bar-content-inner': animation }"
						:style="{ background: contentColor2 }"
					>
						<text class="bar-text" :style="{ color: textColor }">
							{{ doubleText }}
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		// 标题
		title: {
			type: String,
			required: false
		},
		// 总数,计算的分母
		total: {
			type: Number,
			required: true
		},
		// 第一个值
		firstValue: {
			type: Number,
			required: true
		},
		// 第二个值
		secondValue: {
			type: Number
		},
		// 进度条背景颜色
		backColor: {
			type: String,
			default: '#f2f2f2'
		},
		// 进度条高度
		barHeight: {
			type: String
		},
		// 进度条圆角
		barRadius: {
			type: String
		},
		// 进度条颜色
		contentColor: {
			type: String,
			default: '#4cd964'
		},
		// 进度条2颜色
		contentColor2: {
			type: String,
			default: '#f0ad4e'
		},
		// 进度条最小长度
		minWidth: {
			type: String,
			default: '5vw'
		},
		// 文字大小
		textSize: {
			type: String,
			default: '1vw'
		},
		// 文字颜色
		textColor: {
			type: String,
			default: '#333333'
		},
		// 文字内显/外显
		textOut: {
			type: Boolean,
			default: false
		},
		// 展示百分比或值
		percentum: {
			type: Boolean,
			default: false
		},
		// 百分比精确到小数点后几位
		precision: {
			type: [String, Number],
			default: 2
		},
		// 是否选择动画加载
		animation: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			singleText: '',
			doubleText: '',
			firstWidth: '',
			secondWidth: ''
		};
	},
  watch:{
    firstValue(val){
      console.log(val)
      // if(val>0){
        this.firstWidth = this.manageWidth(this.firstValue, 'singleText');
      
    },
  },
	created() {
		this.firstWidth = this.manageWidth(this.firstValue, 'singleText');
		this.secondWidth = this.manageWidth(this.secondValue, 'doubleText');
	},
	methods: {
		manageWidth(target, flag) {
			let value =
				((target / this.total) * 100).toFixed(this.precision) + '%';
			this.percentum ? (this[flag] = value) : (this[flag] = target);
			// 减去间隔所占宽度
			this.secondValue ? (value = `calc(${value} - 1px)`) : '';
			return value;
		}
	}
};
</script>

<style lang="scss" scoped>
.progress-bar {
	&-title {
		font-size: 4vw;
		font-weight: bold;
		margin-bottom: 1vw;
	}

	.bar {
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
		display: flex;
		align-items: center;
		justify-content: space-between;

		&-single {
			overflow: hidden;
			width: 100vw;
		}

		&-double {
			display: flex;
			align-items: center;
			justify-content: left;
		}

		&-content {
			// padding: 1px 0;
			padding: 0;

			&-inner {
				animation: addWidth 1s;
			}
		}

		&-interval {
			background-color: #ffffff;
			width: 2px;
			padding: 1px 0;
			color: rgba(0, 0, 0, 0);
		}

		&-text {
			margin: 0 5px;

			&-placeholder {
				color: rgba(0, 0, 0, 0);
				font-size: 1vw;
			}
		}
	}
}

@keyframes addWidth {
	from {
		width: 0;
	}
	to {
		width: 100%;
	}
}
</style>
